<template>
  <div class="category-page">
    <!-- 分类导航 -->
    <div class="category-header">
      <div class="category-container">
        <div class="category-title">
          <h1>{{ categoryName }}</h1>
        </div>
        <div class="sub-categories">
          <router-link
            class="sub-category-item"
            :class="{ active: !activeSubCategory }"
            :to="{ path: `/category/${categoryId}` }"
          >
            全部
          </router-link>
          <router-link
            v-for="subCategory in subCategories"
            :key="subCategory.id"
            :class="{ active: activeSubCategory === subCategory.id }"
            class="sub-category-item"
            :to="{ path: `/category/${categoryId}/${subCategory.id}` }"
          >
            {{ subCategory.name }}
          </router-link>
        </div>
      </div>
    </div>

    <!-- 视频列表容器 -->
    <div class="category-content">
      <VideoList />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, provide } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import VideoList from '@/views/front/videoList/VideoList.vue'

// 视频接口定义
interface Video {
  id: number | string
  title: string
  thumbnail: string
  duration: number
  viewCount: number
  danmuCount: number
  author: string
  authorAvatar?: string
  createTime: string
}

// 子分类接口定义
interface SubCategory {
  id: string | number
  name: string
}

const route = useRoute()
const router = useRouter()
const categoryId = ref(route.params.categoryId as string)
const activeSubCategory = ref(route.params.subCategoryId as string | undefined)
const categoryName = ref('')
const subCategories = ref<SubCategory[]>([])
const loading = ref(false)

// 准备提供给VideoList组件的数据
provide('categoryData', {
  categoryId,
  subCategoryId: activeSubCategory,
})

// 监听路由变化
watch(
  () => route.params,
  (newParams) => {
    categoryId.value = newParams.categoryId as string
    activeSubCategory.value = newParams.subCategoryId as string | undefined
    // 重新加载分类数据
    getCategoryInfo()
  },
)

// 获取分类信息
const getCategoryInfo = () => {
  // 实际项目中应该从API获取分类信息
  // 这里使用模拟数据
  const categories = [
    {
      id: 'anime',
      name: '番剧',
      subCategories: [
        { id: 'serial', name: '连载动画' },
        { id: 'finish', name: '完结动画' },
        { id: 'news', name: '资讯索引' },
      ],
    },
    {
      id: 'guochuang',
      name: '国创',
      subCategories: [
        { id: 'chinese', name: '国产动画' },
        { id: 'dongman', name: '动态漫画' },
        { id: 'special', name: '国创专题' },
      ],
    },
    {
      id: 'sports',
      name: '运动',
      subCategories: [
        { id: 'basketball', name: '篮球' },
        { id: 'football', name: '足球' },
        { id: 'yoga', name: '瑜伽' },
      ],
    },
    {
      id: 'food',
      name: '美食',
      subCategories: [
        { id: 'china', name: '中餐' },
        { id: 'western', name: '西餐' },
        { id: 'japan', name: '日料' },
      ],
    },
    {
      id: 'car',
      name: '汽车',
      subCategories: [
        { id: 'luxury', name: '豪华车' },
        { id: 'sports', name: '跑车' },
        { id: 'suv', name: 'SUV' },
      ],
    },
    {
      id: 'music',
      name: '音乐',
      subCategories: [
        { id: 'pop', name: '流行' },
        { id: 'rock', name: '摇滚' },
        { id: 'classical', name: '古典' },
      ],
    },
    {
      id: 'movie',
      name: '电影',
      subCategories: [
        { id: 'action', name: '动作' },
        { id: 'comedy', name: '喜剧' },
        { id: 'romantic', name: '爱情' },
      ],
    },
    {
      id: 'knowledge',
      name: '知识',
      subCategories: [
        { id: 'science', name: '科学' },
        { id: 'history', name: '历史' },
        { id: 'geography', name: '地理' },
      ],
    },
  ]

  const currentCategory = categories.find((c) => c.id === categoryId.value)
  if (currentCategory) {
    categoryName.value = currentCategory.name
    subCategories.value = currentCategory.subCategories
  } else {
    categoryName.value = '未知分类'
    subCategories.value = []
  }
}

// 初始化
onMounted(() => {
  getCategoryInfo()
})
</script>

<style lang="scss" scoped>
.category-page {
  padding: 0 5%;
  margin-top: 20px;
}

.category-header {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  .category-container {
    .category-title {
      margin-bottom: 20px;

      h1 {
        font-size: 24px;
        font-weight: bold;
        color: #333;
      }
    }

    .sub-categories {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;

      .sub-category-item {
        padding: 6px 16px;
        border-radius: 16px;
        font-size: 14px;
        color: #666;
        text-decoration: none;
        background-color: #f6f7f8;
        transition: all 0.2s ease;

        &:hover {
          background-color: #e3e5e7;
        }

        &.active {
          background-color: #fb7299;
          color: #fff;
        }
      }
    }
  }
}

.category-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
  color: #666;

  .loading-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #fb7299;
    border-radius: 50%;
    border-top-color: transparent;
    margin-right: 10px;
    animation: spin 0.8s linear infinite;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.no-more {
  text-align: center;
  padding: 20px 0;
  color: #999;
  font-size: 14px;
}
</style>
